<template>
    <div class="page-container">
        <DispatchDetailInfomation :detailData="data" :type="1"></DispatchDetailInfomation>
        <div class="btns">
            <span>保存为草稿</span>
            <span>提交表头</span>
            <span>提交表体</span>
        </div>
        <el-tabs type="border-card">
            <el-tab-pane label="货物申报详情">
                <!-- 货物申报 -->
                <cargoDeclaration></cargoDeclaration>
            </el-tab-pane>
            <el-tab-pane label="导出记录">
                <!--导出记录 -->
                <exportRecord></exportRecord>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { provide } from 'vue'
import DispatchDetailInfomation from "./components/DispatchDetailInfomation.vue";
import cargoDeclaration from "./components/cargoDeclaration.vue";
import exportRecord from "./components/exportRecord.vue";
import { useRouter, useRoute } from 'vue-router'

const Router = useRouter()
const Route = useRoute()

provide('state', Route.query.state)


let data = {
    status: +Route.query.state,
    dispatchCode: "JH2401704",
    FhNo: "SA24050019",
    WlNo: "JH2401704",
    Tdh: "",
    Xxxl: "",
    createTime: "2024-05-01 17:28",
    createBy: "孙向明",
    updateTime: "2024-05-05 18:48",
    updateBy: "李今颖",
    Booking: "",
    PorductMess: "",
    JdDate: "",
    JgTime: "",
    JgDate: "",
    KhDate: "",
    InPortCode: "",
    PortName: "",
    HcName: "",
    ShipName: "",
    CdName: "",
    ContractNo: "",
};
</script>
<style lang="scss" scoped>
.btns {
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    background: #FFFFFF;
    margin-top: 4px;
    padding: 4px 16px;
    margin-bottom: 4px;

    span {
        color: #3B78FF;
        font-family: PingFang SC;
        font-weight: regular;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: right;
        cursor: pointer;
        margin-right: 24px;
    }
}
</style>